<template>
    <el-aside width="15vw" style="background-color: #252525;position: fixed; height: 100%;   z-index: 20;">
        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height:90%;">
            <div class="scroll-sidebar" style="overflow: auto; width: auto; height: 100%;">
                <el-menu :default-active="open_index"
                  @select="openIndexHandle"  
                  collapse-transition='true'
                  menu-trigger='click'
                  style="border:none" 
                  :unique-opened='true' 
                  class="el-menu-vertical-demo" 
                  @open="handleOpen" 
                  @close="handleClose"
                  :collapse="isCollapse">
                      <el-submenu index="11" v-if="cheack_auth('客户管理')">
                        <template slot="title"><i class="iconfont pubIco icon-kehuqunzu"></i><span slot="title">客户管理</span></template>
                        <el-menu-item-group>
                            <el-menu-item v-if="cheack_auth('线上会员')" index="1" @click="goto('customerInfo')">线上会员</el-menu-item>
                            <el-menu-item v-if="cheack_auth('线上会员')" index="2" @click="goto('customerInfo')">线上会员2</el-menu-item>
                            <el-menu-item v-if="cheack_auth('线上会员')" index="3" @click="goto('customerInfo')">线上会员3</el-menu-item>
                        </el-menu-item-group>
                      </el-submenu>
                </el-menu>
            </div>
        </div>
    </el-aside>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import store from "../../vuex/store";
import { getAuth } from "../../service/authority/index.js";
export default {
  name: "Left",
  data() {
    return {
      open_index: sessionStorage.getItem("openIndex") || "", // 当前打开菜单的index
      menu_data: [],
      menu_data_api_error: false,
      isCollapse: null,
      screenWidth: document.body.clientWidth
    };
  },
  computed: {},
  mounted() {
    this.get_auth();
    parseInt(this.screenWidth) <= 1366
      ? (this.isCollapse = true)
      : (this.isCollapse = false);
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
        parseInt(this.screenWidth) <= 1366
          ? (that.isCollapse = true)
          : (that.isCollapse = false);
      })();
    };
  },

  watch: {
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          console.log(that.screenWidth);
          that.timer = false;
        }, 400);
      }
    }
  },
  methods: {
    ...mapMutations(["save_authdata"]),
    goto(path) {
      this.$router.push({
        name: path
      });
    },
    openIndexHandle(data, indexPath) {
      sessionStorage.setItem("openIndex", data);
    },
    async get_auth() {
      const { code, data, message } = await getAuth();
      if (code == 200) {
        this.menu_data = data;
      } else {
        this.menu_data_api_error = true;
      }
    },
    cheack_auth(c_name) {
      var state = false;
      if (!this.menu_data) return true;
      for (var i = 0; i < this.menu_data.length; i++) {
        if (this.menu_data[i].name == c_name) {
          state = true;
        }
        if (this.menu_data[i]._child) {
          for (var j = 0; j < this.menu_data[i]._child.length; j++) {
            if (this.menu_data[i]._child[j].name == c_name) {
              state = true;
            }
          }
        }
      }
      if (this.menu_data_api_error == true) return true;
      return state;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 15vw;
  min-height: 400px;
}
.el-menu-item-group__title {
  display: none;
}
@media screen and (max-width: 3366px) {
  .el-aside {
    width: 70px !important;
  }
  .el-menu-item:hover {
    color: #fff !important;
  }

  .crmRight {
    width: calc(100% - 70px) !important;
    margin-left: 70px !important;
  }
}
@media screen and (min-width: 1367px) {
  .el-aside {
    width: 15vw !important;
  }

  .crmRight {
    width: calc(100% - 15vw) !important;
    margin-left: 15vw !important;
  }
}
.el-aside ul {
  background: #252525;
}

.el-aside * {
  color: #fff !important;
}

.el-menu-item.is-active {
  color: #409eff !important;
}

.el-submenu__title i {
  color: #fff;
}

.el-submenu__title:hover {
  background-color: #1b1b1b !important;
}

.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #1b1b1b !important;
}

.pubIco {
  position: relative;
  left: -20px;
  color: #fff;
}

.el-submenu__title {
  padding-left: 4vw !important;
}

.el-menu > .el-menu-item {
  padding-left: 4vw !important;
  /*color: #fff;*/
}

.el-menu-item-group > ul > .el-menu-item {
  padding-left: 5.8vw !important;
}

.el-menu-item i {
  color: #fff;
}
</style>